Skip to content

fix(web): real upload button + visible preview-toggle#10

Merged
SwathiMystery merged 1 commit intomainfrom
fix/editor-upload-preview
Apr 21, 2026
Merged

fix(web): real upload button + visible preview-toggle#10
SwathiMystery merged 1 commit intomainfrom
fix/editor-upload-preview

Conversation

@SwathiMystery
Copy link
Copy Markdown
Contributor

What

Two usability bugs in the notes editor:

  1. Clicking the image button in the toolbar did nothing useful (it inserted a bare `alt` placeholder, no file picker, no upload).
  2. Clicking the preview (eye) icon felt like a one-way door — the toolbar greyed out and the way back wasn't obvious.

Why

  1. Upload: EasyMDE has two toolbar items for images. `image` just inserts a markdown stub. `upload-image` is the one that fires the file-picker + `imageUploadFunction`. We had the former.
  2. Preview: EasyMDE applies `disabled-for-preview` to other toolbar buttons while preview is active. Without explicit styling for that class + a clear title on the preview button, users had no signal that clicking the eye again would flip back.

Changes

`editor.js`

  • Toolbar: `image` → `upload-image` (only when an upload URL is wired; falls back to `image` otherwise).
  • Custom `preview` toolbar item with an explicit title: "Toggle preview (click again to go back)" and the `noDisable: true` flag so it stays fully interactive while siblings dim.
  • Added `imageAccept` + `imageMaxSize` so paste / drag-drop match the server-side allowlist (png / jpg / webp / gif, 10 MB).
  • Added `fullscreen` toolbar item for distraction-free writing.

`style.css`

  • `.disabled-for-preview` and `button[disabled]` now render at 0.35 opacity — visibly greyed, not vanished — so the toolbar keeps its shape and the preview-exit button stays obvious.
  • Active-state styling bumped from just-a-coloured-icon to a filled accent background so toggles read at a glance.

Verification

  • File-picker button, drag-drop, and paste all route through the same endpoint (`POST /upload/note/{day|trade}/...`) → attachment row → markdown embed.
  • Preview mode: eye icon stays fully coloured and clickable; other buttons dim to 0.35 opacity.
  • Live round-trip:
    ```
    POST /upload/note/day/2026-04-15 → 200 {"url": "/media/2026/04/21/.png"}
    GET /media/2026/04/21/.png → 200 (image/png)
    ```

Checklist

  • 46/46 tests green
  • `uv run ruff check khata tests` clean
  • `uv run ruff format khata tests` applied
  • No schema change

Two usability issues on the rich-notes editor:

1. No way to upload an image
   - The toolbar used EasyMDE's 'image' item, which only inserts a
     literal '![alt](url)' placeholder line. The 'upload-image' item
     is the one that fires a file-picker and calls imageUploadFunction.
   - Swapped 'image' → 'upload-image' (only when an upload URL is
     wired; falls back to 'image' otherwise).
   - Also set imageAccept + imageMaxSize explicitly so paste / drag-drop
     match the server-side allowlist (png/jpg/webp/gif, 10 MB).

2. Preview mode felt like a one-way door
   - EasyMDE disables the rest of the toolbar during preview and the
     user couldn't see a clear way back.
   - Defined a custom 'preview' toolbar item with a descriptive title
     ('Toggle preview (click again to go back)') and the no-disable
     flag so the button stays fully interactive while other buttons dim.
   - CSS: disabled-for-preview buttons now have opacity 0.35 (visibly
     greyed, not vanished) so the user still sees the toolbar.
   - Active-state styling bumped: filled accent background instead of
     just an accent-coloured icon, so toggles read at a glance.
   - Added 'fullscreen' to the toolbar for distraction-free writing.

Paste + drag-drop upload continue to work via EasyMDE's own handlers
(they fire imageUploadFunction whenever uploadImage is true).

Tests unchanged; 46/46 still green.
@SwathiMystery SwathiMystery merged commit e80f0a6 into main Apr 21, 2026
7 checks passed
@SwathiMystery SwathiMystery deleted the fix/editor-upload-preview branch April 21, 2026 04:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant